<script setup lang="ts">
import { computed } from "vue";
import Flex from "@/components/Layout/Flex.vue";

// props
interface Props {
  textLength: number;
  status?: number;
  textColor?: string;
}
const props = withDefaults(defineProps<Props>(), {
  textLength: 0,
  status: 0,
  textColor: "#17181C"
});
// emit
const emit = defineEmits(["click"]);
//computed
function formatTime(seconds: number) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes > 0 ? `${minutes}'` : ""}${remainingSeconds}''`;
}
const getTimeByTextLength = computed(() => {
  const t = props.textLength * 0.2;
  return `${formatTime(t)}`;
});
</script>

<template>
  <Flex class="audio-container" justify="flex-start">
    <Flex class="load-content" v-if="props.status === 1">
      <view class="load"></view>
    </Flex>
    <Flex
      v-else
      :class="['audio-content', { play: props.status === 2 }]"
      :style="{ borderColor: props.textColor }"
      @click.stop="emit('click')"
    >
      <view
        v-for="(item, index) in 3"
        :key="index"
        :class="['i', 'i-' + index]"
        :style="{ borderColor: props.textColor }"
      ></view>
    </Flex>
    <view class="time" :style="{ color: props.textColor }">{{
      getTimeByTextLength
    }}</view>
  </Flex>
</template>

<style lang="scss" scoped>
@keyframes fade {
  100% {
    opacity: 0.5;
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.load-content {
  width: 26px;
  height: 26px;
  border-radius: 100%;
  border: 3px solid transparent;

  transform: scale(0.7);
  margin-right: 5px;
  .load {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    animation: rotate 1s ease infinite;
  }
}
.audio-content {
  border-width: 3px;
  border-style: solid;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  transform: scale(0.7);
  margin-right: 5px;
  .i-0 {
    width: 0;
    height: 0;
    border-radius: 100%;
    border-width: 2px;
    border-style: solid;
  }
  .i-1 {
    width: 20px;
    height: 12px;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    margin-left: -20px;
  }
  .i-2 {
    width: 25px;
    height: 20px;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    margin-left: -25px;
  }
  &.play {
    .i {
      animation: fade 0.6s ease infinite alternate;
    }
    .i-1 {
      animation-delay: 0.3s;
    }
    .i-2 {
      animation-delay: 0.6s;
    }
  }
}
.time {
  font-size: 14px;
}
</style>
